<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3透明度</title>
	<style type="text/css">
		body{
			background-color:cyan; 
		}
		.box{
			width: 200px;
			height: 200px;
			/*background: url(../images/location_bg.jpg);*/
			background-color: gold;
			margin: 50px auto 0;
			border:2px solid #000;
			border-radius: 50%;
			opacity: 0.3;   /*也就是30%，但是不兼容IE*/
			filter: alpha(opacity=50);  /*加上这句就可以兼容*/
			text-align: center;
			line-height: 200px;
		}

		.box2{
			width: 200px;
			height: 200px;
			/*background: url(../images/location_bg.jpg);*/
			margin: 50px auto 0;
			border:2px solid rgba(0,0,0,0.3);
			border-radius: 50%;
			text-align: center;
			line-height: 200px;
			background-color: rgba(255,215,0,0.3);  /*它的好处是只会使得背景变透明，而对字体无影响,但是图片就不能使用rgba*/
		}
	</style>
</head>
<body>
	<div class="box">窗前明月光</div>
	<div class="box2">疑是地上霜</div>
</body>
</html>